<template>
  <div class="clearfix">
    <div class="pos-fix m-menu clearfix">
      <img class="fxl logo" src="../assets/images/logo.png" @click="home"/>

      <button class="fxr no-bg search" @click="search =!search">
        <i class="iconfont fxr icon-sousuo"></i>
      </button>

      <a href="javascript:;" class="fxr menu_h" @click="openMenu()">
        <span>Menu</span>
      </a>
    </div>

    <div class="m-search pos-fix blockAniTD" v-show="search">
      <i class="iconfont pos-abs icon-search" @click="jump()"></i>
      <input v-model="keyWord" placeholder="请输入您要搜索的内容" @keydown="keydown" />
    </div>

    <ul class="r-menu pos-fix blockAniTD" v-show="menuList">
      <li
        class="pos-rel"
        v-for="(item,index) in headerData"
        @click="changeli(index,item)"
        :key="item.id"
      >
        <router-link :to="{}">
          <span @click="level1NavMenu(item.id)">{{item.name}}</span>
        </router-link>

        <span v-if="item.list.length>0&&item.show==false" class="r-add pos-abs">+</span>
        <span v-if="item.list.length>0&&item.show==true" class="r-add pos-abs">-</span>

        <ul v-show="item.show">
          <li v-for="sub in item.list" :key="sub.id">
            <a class="link" @click="jumpArticleList(sub)">{{ sub.channelName }}</a>
          </li>
        </ul>
      </li>
    </ul>

  </div>
</template>

<script>
import _http from "../httpService";
import $ from "jquery";

export default {
  name: "Header",
  props: {
    msg: String,
  },
  data() {
    return {
      keyWord: null,
      loading: true,
      seen: false,
      // menu: null,
      isSubshow: false,
      menuList: false,
      search: false,
      isTreeShow: false,
      menu: [],
      headerData: [],
    };
  },

  methods: {
    level1NavMenu(id) {
      if(id == "homePage")
        this.$router.push('/mobile')
    },

    home() {
      this.$router.push('/mobile')
    },

    keydown(e) {
      if (e.key == "Enter") this.jump();
    },
    changeActive($event) {
      $event.currentTarget.className = "hover";
    },
    removeActive($event) {
      $event.currentTarget.className = "";
    },
    openMenu() {
      this.menuList = !this.menuList;
      if (this.menuList) {
        $(".menu_h").addClass("menu-open");
      } else {
        $(".menu_h").removeClass("menu-open");
      }
    },
    changeli: function (ind, item) {
      item.show = !item.show;
      console.log(item.name);
    },
    
    showHideTree: function () {
      var qcloud = {};
      $("[_t_nav]").hover(
        function () {
          var _nav = $(this).attr("_t_nav");
          clearTimeout(qcloud[_nav + "_timer"]);
          qcloud[_nav + "_timer"] = setTimeout(function () {
            $("[_t_nav]").each(function () {
              $(this)[
                _nav == $(this).attr("_t_nav") ? "addClass" : "removeClass"
              ]("nav-up-selected");
            });
            $("#" + _nav)
              .stop(true, true)
              .slideDown(200);
            console.log("down");
          }, 150);
        },
        function () {
          var _nav = $(this).attr("_t_nav");
          clearTimeout(qcloud[_nav + "_timer"]);
          qcloud[_nav + "_timer"] = setTimeout(function () {
            $("[_t_nav]").removeClass("nav-up-selected");
            $("#" + _nav)
              .stop(true, true)
              .slideUp(200);
            console.log("up");
          }, 150);
        }
      );
    },
    showTemp(index) {
      this.idx = index;
    },
    hideTemp() {
      this.idx = -1;
    },

    jump: function () {
      if (this.keyWord == "") {
        return;
      }
      this.$router.push({
        path: "/MobileFullTestSearch",
        query: { keyWord: this.keyWord },
      });
    },

    jumpArticleList: function (item) {
      if (item.leaft == "1")
        this.$router.push({
          path: "/HospitalSummedup",
          query: { channelCode: item.channelCode },
        });

        this.openMenu()
    },
  },

  mounted() {
    // 初始化加载栏目等数据
    let that = this

    _http
      .get("/website/jcChannel/getChannelListByPc?parentCode=home")
      .then((response) => {
        that.headerData = [{id: "homePage", list: [], name: "首页", path: "/mobile"}];

        response.data.result.records.forEach((element) => {
          that.headerData.push({
            name: element.channelName,
            id: element.channelNameEn,
            path: element.link,
            list: element.channelList,
            show: false,
          });
        });
      })
      .catch((error) => console.log(error));
  },
};
</script>

<style>
@import "../assets/css/mobile.css";
.mobile .search {
  position: fixed;
  top: 10px;
  right: 50px;
  color: #333;
}
.mobile .menu_h {
  display: block;
  background: none;
  transition: 0.3s all;
  -webkit-transition: 0.3s all;
  border: none;
  width: 0.7rem;
  height: 0.3rem;
  padding: 0;
  outline: none;
  position: fixed;
  right: 10px;
  top: 0.5rem;
  z-index: 2000;
}

.mobile .menu_h::before,
.menu_h::after,
.menu_h span {
  background: #333;
  border-radius: 2px;
}

.mobile .menu_h::before,
.menu_h::after {
  content: "";
  position: absolute;
  height: 4px;
  width: 100%;
  left: 0;
  top: 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition: -webkit-transform 0.25s;
  transition: -webkit-transform 0.25s;
  transition: transform 0.25s;
  transition: transform 0.25s, -webkit-transform 0.25s;
}

.mobile .menu_h span {
  position: absolute;
  width: 100%;
  height: 4px;
  top: 50%;
  left: 0;
  overflow: hidden;
  text-indent: 200%;
  -webkit-transition: opacity 0.25s;
  transition: opacity 0.25s;
}

.mobile .menu_h::before {
  -webkit-transform: translate3d(0, -12px, 0);
  transform: translate3d(0, -12px, 0);
}

.mobile .menu_h::after {
  -webkit-transform: translate3d(0, 12px, 0);
  transform: translate3d(0, 12px, 0);
}

.mobile .menu-open.menu_h span {
  opacity: 0;
}

.mobile .menu-open.menu_h::before {
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
  transform: rotate3d(0, 0, 1, 45deg);
}

.mobile .menu-open.menu_h::after {
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
  transform: rotate3d(0, 0, 1, -45deg);
}
.mobile .r-add {
  top: 8px;
  display: block;
  line-height: 40px;
  right: 0px;
  font-size: 20px;
  width: 30px;
  text-aign: center;
  color: #fff;
}
.mobile .r-menu li ul {
  margin: 10px;
}
.mobile .r-menu li ul li a {
  border: 0px;
  margin: 0px;
  padding: 0px;
  font-size: 14px;
  line-height: 30px;
}
</style>
